<!--前台模块-->
<template>
  <div class="reception">
    <el-row>
      <el-col :span="14">
        <!-- 今日概况 -->
        <!--  :percentage="0"  -->
        <div class="outcircle">
          <div class="circle">
            <span>
              300
              <i class="el-icon-top" />
            </span>
            <span class="span">来院人数</span>
          </div>
          <div class="circle">
            <span>
              300
              <i class="el-icon-bottom" />
            </span>
            <span class="span">咨询人数</span>
          </div>
          <div class="circle">
            <span>300</span>
            <span class="span">成交人数</span>
          </div>
          <div class="circle">
            <span>30,000</span>
            <span class="span">今日开单</span>
          </div>
        </div>
        <!--  预约管理-->
        <el-col style="box-shadow:rgba(0,0,0,.3) 0px 0px 10px;">
          <div class="headStyle">
            <el-col :span="3">今日预约</el-col>
            <!-- <el-col :span="3" style="margin-top: -5px;"><el-button @click="moreClick('预约')">更多</el-button></el-col> -->
            <el-col class="buttons" :span="3" :offset="15" style="text-align: right"><el-button @click="subscribeBtn">+ 增加预约</el-button></el-col>
            <el-col :span="1" :offset="2">
              <i class="el-icon-more" />
              <div>
                <el-button @click="moreClick('预约')">更多</el-button>
              </div>
            </el-col>
          </div>
          <div class="headStyle">
            <el-col :span="3">预约中：{{ appointment.total }}</el-col>
            <el-col :span="3">已到店：{{ appointment.parameter1 }}</el-col>
            <el-col :span="3">已过期：{{ appointment.parameter2 }}</el-col>
          </div>
          <div class="headStyle">
            <el-table v-loading="loading" :data="appointment.dto" border :row-class-name="tableColor">
              <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
              <el-table-column label="性别" prop="customerSex" :show-overflow-tooltip="true" />
              <el-table-column label="预约时间" prop="appointmentTime" min-width="120" :show-overflow-tooltip="true" />
              <el-table-column label="项目分类" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span v-if="scope.row.appointmentType==='现场咨询'">{{ scope.row.advisoryClassification }}</span>
                  <span v-else>{{ scope.row.projectName }}</span>
                </template>
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="接待人" prop="receiverName" />
              <el-table-column :show-overflow-tooltip="true" label="剩余时间" prop="remainingTime" />
              <el-table-column label="操作" min-width="120">
                <template slot-scope="scope">
                  <el-button type="text" @click="signInBtn(scope.row)">签到</el-button>
                  <el-button type="text" @click="cancelBtns(scope.row)">取消预约</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <!--  分诊管理-->
        <el-col class="headStyle" style="box-shadow:rgba(0,0,0,.3) 0px 0px 10px;">
          <div class="span-y">
            <el-col :span="3">今日分诊</el-col>
            <!-- <el-col :span="3" style="margin-top: -5px;"><el-button @click="moreClick('分诊')">更多</el-button></el-col> -->
            <el-col class="buttons" :span="3" :offset="15" style="text-align: right"><el-button @click="handleAddTriage">+ 增加分诊</el-button></el-col>
            <el-col :span="1" :offset="2">
              <i class="el-icon-more" />
              <div>
                <el-button @click="moreClick('分诊')">更多</el-button>
              </div>
            </el-col>
          </div>
          <div class="headStyle">
            <el-col :span="3">共分诊：{{ triage.total }}</el-col>
            <el-col :span="3">等待中：{{ triage.parameter1 }}</el-col>
            <el-col :span="3">已接待：{{ triage.parameter2 }}</el-col>
          </div>
          <div class="headStyle">
            <el-table v-loading="loading" :data="triage.dto" border :row-class-name="tableColor">
              <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
              <el-table-column label="性别" prop="customerSex" :show-overflow-tooltip="true" />
              <el-table-column label="分诊类型" prop="treatType" :show-overflow-tooltip="true" />
              <el-table-column label="咨询分类/项目" prop="intentCaseName" :show-overflow-tooltip="true" />
              <el-table-column label="咨询师" prop="adviserName" :show-overflow-tooltip="true" />
              <el-table-column label="前面人数" prop="waitMan" :show-overflow-tooltip="true" />
              <el-table-column label="已等时间" prop="waitTime" :show-overflow-tooltip="true" />
              <el-table-column label="操作" min-width="120">
                <template slot-scope="scope">
                  <el-button type="text" @click="toSendBtn(scope.row)">改派</el-button>
                  <el-button type="text" @click="cancelBtn(scope.row)">取消</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <!-- 咨询管理-->
        <el-col class="headStyle" style="box-shadow:rgba(0,0,0,.3) 0px 0px 10px;">
          <div class="span-y">
            <el-col :span="3">咨询任务</el-col>
            <!-- <el-col :span="3" style="margin-top: -5px;"><el-button @click="moreClick('咨询')">更多</el-button></el-col> -->
            <el-col :span="1" :offset="20">
              <i class="el-icon-more" />
              <div>
                <el-button @click="moreClick('咨询')">更多</el-button>
              </div>
            </el-col>
          </div>
          <div class="headStyle">
            <el-col :span="3">等待中：{{ advisory.parameter1 }}</el-col>
            <el-col :span="3">已接待：{{ advisory.parameter2 }}</el-col>
          </div>
          <div class="headStyle">
            <el-table v-loading="loading" :data="advisory.dto" style="width: 100%" border :row-class-name="tableColor">
              <el-table-column prop="customerName" label="顾客" :show-overflow-tooltip="true" />
              <el-table-column prop="customerSex" label="性别" :show-overflow-tooltip="true" />
              <el-table-column prop="treatType" label="分诊类型" :show-overflow-tooltip="true" />
              <el-table-column prop="intentCaseName" label="项目分类/项目" :show-overflow-tooltip="true" />
              <el-table-column label="操作" min-width="120">
                <template slot-scope="{ row }">
                  <el-button type="text" @click="$refs.newAdd.advisory(row, row.id)">开始咨询</el-button>
                  <el-button type="text" @click="reassignment(row)">改派</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-col>
      <!-- 通知提醒 -->
      <el-col :span="10" style="padding: 0 20px">
        <!-- <el-col style="box-shadow:rgba(0,0,0,.3) 0px 0px 10px;height: 500px;overflow:auto;">
          <div class="headStyle">
            <el-col :span="5">通知提醒</el-col> -->
        <!-- <el-col :span="3" style="margin-top: -5px;"><el-button @click="$emit('handle')">更多</el-button></el-col> -->
        <!-- <el-col :span="1" :offset="17">
              <i class="el-icon-more" />
              <div>
                <el-button @click="$emit('handle')">更多</el-button>
              </div>
            </el-col>
          </div>
          <el-col v-for="(item,index) in newsList" :key="index" style="margin-top:20px;padding:0 20px">
            <span>{{ item.warnTime.split(" ")[0] + "：" }}</span>
            <span>{{ item.warnContent }}</span>
          </el-col>
        </el-col> -->
        <div style="box-shadow:rgba(0,0,0,.3) 0px 0px 10px;height: 520px;overflow:auto;">
          <div class="headStyle">
            <el-col :span="5">通知提醒</el-col>
            <!-- <el-col :span="3" style="margin-top: -5px;"><el-button @click="$emit('handle')">更多</el-button></el-col> -->
            <el-col :span="1" :offset="17">
              <i class="el-icon-more" />
              <div>
                <el-button @click="$emit('handle')">更多</el-button>
              </div>
            </el-col>
          </div>
          <el-timeline style="margin:30px 0 0 15px">
            <el-timeline-item
              v-for="(item,index) in newsList"
              :key="index"
            >
              <span>{{ item.warnTime.split(" ")[0] + "：" }}</span>
              <span>{{ item.warnContent }}</span>
            </el-timeline-item>
          </el-timeline>
        </div>
        <el-col style="box-shadow:rgba(0,0,0,.3) 0px 0px 10px;height: 200px;margin-top:20px">
          <div class="headStyle">
            <el-col :span="5">常用功能</el-col>
            <el-col :span="1" :offset="18">
              <span class="el-icon-edit-outline" />
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <Dialog ref="subscribeRef" :title.sync="titles" :visible.sync="triageVisible" :flag="flag" :customer="customerName" @success="getTriageList()" />
    <NewAdd
      ref="newAdd"
      :modal-visible-data="modalVisibleData"
      @close="modalVisible = false"
      @success="getAdvisory()"
    />
    <Dialog
      ref="subscribeRefs"
      :visible.sync="visibles"
      :title="title"
      :flag="flag"
    />
    <!-- 新增预约 -->
    <Subscribe ref="addSubscribeRef" :title="title" :test-btn="textBtn" :visible.sync="subscribeVisible" :flag="false" @success="getAppointmentList" @addTriage="addTriageBtn" />
  </div>
</template>

<script>
import NewAdd from "@/views/lobby/doctor/newAdd";
import Dialog from "@/views/reception/triage/management/dialog";
import Subscribe from "@/views/reception/subscribe/management/dialog";
import { tableColor } from '@/utils/common.js';
export default {
  name: "Reception",
  components: {
    NewAdd,
    Dialog,
    Subscribe,
  },
  data() {
    return {
      triage: {},
      appointment: {},
      advisory: {},
      tableColor,
      loading: false,
      modalVisible: false,
      modalVisibleData: {},
      visibles: false,
      title: "修改分诊",
      flag: false,
      newsList: [],
      time: "",
      titles: "",
      triageVisible: false,
      customerName: "",
      flags: false,
      isShow: false,
      textBtn: "",
      subscribeVisible: false,
      triageVisibles: false,
      searchForm: {
        appointmentStatus: "预约中",
      },
    };
  },
  created() {
    this.getTriageList();
    this.getAppointmentList();
    this.getAdvisory();
    // const ws = new WebSocket(window.GLOBAL.BASE_SERVER + "");
    // ws.onopen = function(evt) {
    //   console.log("Connection open ……");
    // };
    // ws.onclose = function(evt) {
    //   console.log("Connection closed");
    // };
    this.getNews();
    this.time = setInterval(() => {
      this.getNews();
    }, 60000);
  },
  destroyed() {
    clearInterval(this.time);
  },
  methods: {
    async getNews() {
      const res = await this.$api["workbench/workbench/messagePage"]({ page: 1, pageSize: this.$store.state.commonsettings.maxPageSize });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.newsList = res.data.result;
    },
    async getAppointmentList() {
      this.loading = true;
      const res = await this.$api['workbench/workbench/appointmentList']({});
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询预约列表失败！');
      this.appointment = res.data;
    },
    async getTriageList() {
      this.loading = true;
      const res = await this.$api['workbench/workbench/triageList']({});
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询分诊列表失败！');
      this.triage = res.data;
    },
    async getAdvisory() {
      this.loading = true;
      const res = await this.$api['workbench/workbench/advisoryList']({});
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询咨询列表失败！');
      this.advisory = res.data;
    },
    reassignment(row) {
      // 改派
      this.visibles = true;
      this.$nextTick(() => {
        this.$refs.subscribeRefs.editTriageBtn(JSON.parse(JSON.stringify(row)));
      });
    },
    handleAddTriage() {
      this.titles = "增加分诊";
      this.flags = false;
      this.triageVisible = true;
      this.$refs.subscribeRef.addTriageBtn();
    },
    // 改派
    toSendBtn(row) {
      this.titles = "修改分诊";
      this.flags = false;
      this.triageVisible = true;
      this.$refs.subscribeRef.editTriageBtn(row);
    },
    // 取消
    async cancelBtn(row) {
      const confirmResult = await this.$confirm("请确认是否取消?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已撤回取消操作！");
      }
      const res = await this.$api["reception/triage/cancel"]({ id: row.id });
      if (res.code !== 200) return this.$message.error("取消失败！");
      this.$message.success("取消成功");
      this.getTriageList();
    },
    // 增加预约
    subscribeBtn(row) {
      this.title = "增加预约";
      this.textBtn = "提交";
      this.flag = false;
      this.subscribeVisible = true;
      this.$refs.addSubscribeRef.addSubscribeBtn(row, this.searchForm);
    },
    moreClick(name) {
      if (name === '预约') {
        this.$router.push({ path: "/swan/reception/subscribe/management" });
      } else if (name === "分诊") {
        this.$router.push({ path: "/swan/reception/triage/management" });
      } else {
        this.$router.push({ path: "/swan/lobby/doctor/index" });
      }
    },
    addTriageBtn(row) {
      this.show = true;
      this.$nextTick(() => {
        this.titles = "添加分诊";
        this.$refs.addTriageRef.addTriage(row);
      });
    },
    // 签到
    async signInBtn(row) {
      this.title = "预约签到";
      this.textBtn = "签到并分诊";
      this.judgeConditions();
      this.$refs.addSubscribeRef.signInBtn(row, this.searchForm);
    },
    // 取消预约
    cancelBtns(row) {
      this.title = "取消预约";
      this.textBtn = "提交";
      this.judgeConditions();
      this.$refs.addSubscribeRef.cancelBtn(row, this.searchForm);
    },
    judgeConditions() {
      this.flag = false;
      this.subscribeVisible = true;
      this.triageVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.headStyle{
  margin-top: 20px;
  padding: 10px;
  color: #7c7c7c;
}
.el-progress{
  margin: 20px 5%;
}
@import '../css/reception.scss';
.outcircle{
  display: flex;
  height: 300px;
  // justify-content: space-between;
  // column-count: center;
  .circle{
    width: 150px;
    text-align: center;
    height: 150px;
    margin: auto;
    border-radius: 100%;
    box-shadow:rgba(0,0,0,.3) 0px 0px 10px;
    span{
      display: block;
      line-height: 30px;
    }
    >:nth-child(1){
      font-size: 28px;
      margin-top: 33%;
    }
    .span{
      color: #666666;
    }
  }
}
.el-icon-top{
  color: #f77464;
}
.el-icon-bottom{
  color: #42d073;
}
.el-table thead{
  color: #b9b9b9 !important;
}
.span-y{
  padding-top: 20px;
}
/deep/.el-timeline-item__tail{
  border-left:2px solid #9baed3;
}
/deep/.el-timeline-item__node{
  background: #9baed3;
}
</style>
